<template>
    <div
        class="mask"
        v-if="showCart && caculations.total > 0"
        @click="handleCartShowChange"
    />
    <div class="cart">
        <div class="product" v-if="showCart && caculations.total > 0">
            <div class="product__header">
                <div 
                class="product__header__all"
                @click=" () => setCartItemsChecked(shopId)">
                    <span
                    class="product__header__icon iconfont"
                    v-html="caculations.allChecked ? '&#xe652;':'&#xe7ae;'"
                    >
                    </span>
                    全选
                </div>
                <div class="product__header__clear">
                    <span 
                    @click="() => cleanCartProducts(shopId)"
                    class="product__header__clear__btn"
                    > 清空购物车</span>
                </div>
            </div>
            <div 
            class="product__item"
            v-for="(item) in productList"
            :key="item._id"
            >
                <div
                class="product__item__checked iconfont"
                v-html="item.check?'&#xe652;':'&#xe7ae;'"
                @click=" () => changeCartItemChecked(shopId, item._id)"
                />
                <img :src="item.imgUrl" class="product__item__img" alt="">
                <div class="product__item__detail">
                    <h4 class="product__item__title">{{ item.name }}</h4>
                    <p class="product__item__price">
                        <span class="product__item__yen">&yen;</span>{{ item.price }}
                        <span class="product__item__origin">&yen;{{ item.oldPrice }}</span>
                    </p>
                </div>
                <div class="product__number">
                    <span
                        class="product__number__minus iconfont"
                        @click=" () => { changeCartItemInfo(shopId, item._id, item, -1) }"
                    >&#xe66d;</span>
                    {{ item.count || 0 }}
                    <span 
                        class="product__number__plus iconfont"
                        @click=" () => { changeCartItemInfo(shopId, item._id, item, 1) }"
                    >&#xe667;</span>
                </div>
            </div>
        </div>
        <div class="check">
            <div class="check__icon">
                <img 
                src="http://www.dell-lee.com/imgs/vue3/basket.png"
                class="check__icon__img"
                @click="handleCartShowChange"
                />
                <div class="check__icon__tag">{{caculations.total}}</div>
            </div>
            <div class="check__info">
                总计：<span class="check__info__price">&yen; {{caculations.price}}</span>
            </div>
            <div class="check__btn" v-show=" caculations.total > 0 ">
                <router-link :to="{path: `/orderConfirmation/${shopId}`}">
                    去结算
                </router-link>
            </div>
        </div>
    </div>
    
</template>
<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { useCommomCartEffect } from '../../effects/cartEffects'

// 获取购物车信息逻辑
const useCartEffect = (shopId) => {
    const store = useStore()
    const { productList, changeCartItemInfo, caculations } = useCommomCartEffect(shopId)     
    
    //改变商品选中状态
    const changeCartItemChecked = (shopId, productId)=>{
        store.commit('changeCartItemChecked',{ shopId, productId })
    }
    // 清空购物车商品
    const cleanCartProducts = (shopId) => {
        store.commit('cleanCartProducts',{ shopId })
    }
    // 点击全选，所有商品被选中
    const setCartItemsChecked = (shopId) => {
        store.commit('setCartItemsChecked', { shopId })
    }

    return {
        caculations,
        productList,
        changeCartItemInfo,
        changeCartItemChecked,
        cleanCartProducts,
        setCartItemsChecked,
    }
}

// 展示隐藏购物车逻辑
const toggleCartEffecrt = () => {
    const showCart = ref(false);
    const handleCartShowChange = () => {
        showCart.value = !showCart.value;
    }
    return { showCart, handleCartShowChange }
}

export default {
    name:'Cart',
    setup(){
        const route = useRoute()
        const shopId = route.params.id;
        const {
            caculations, productList,
            changeCartItemInfo, changeCartItemChecked, cleanCartProducts,
            setCartItemsChecked,
        } = useCartEffect(shopId)
        const { showCart, handleCartShowChange } = toggleCartEffecrt();
        return {
            caculations, shopId, productList, 
            changeCartItemInfo, changeCartItemChecked, cleanCartProducts,
            setCartItemsChecked, showCart, handleCartShowChange
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.mask{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
}
.cart{
    // display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    // height: .5rem;
    background-color: $bgColor;
}
.product{
    overflow-y: scroll;//y轴滚动
    flex: 1;
    background-color: $bgColor;
    &__header{
        display: flex;
        line-height: .52rem;
        background-color: $bgColor;
        border-bottom: 1px solid $content-bgColor;
        font-size: .14rem;
        color: $content-fontcolor;    
        &__all{
            width: .64rem;
            margin-left: .16rem;
        }
        &__icon{
            display: inline-block;
            margin-right: .1rem;
            vertical-align: top;
            color: $btn-bgColor;
            font-size: .2rem;
        }
        &__clear{
            flex: 1;
            margin-right: .16rem;
            text-align: right;
            &__btn{
                display: inline-block;
                
            }
        }
    }
    &__item{
        position: relative;
        // bottom: .5rem;
        display: flex;
        padding: .12rem 0;//下面有边框，用padding会有问题
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgColor;
        &__checked{
            color: $btn-bgColor;
            font-size: .2rem;
            line-height: .47rem;
            margin-right: .1rem;
        }
        &__detail{
            overflow:hidden;
        }
        &__img{
            width: 0.46rem;
            height: 0.46rem;
            margin-right: .16rem;
        }
        &__title{
            line-height: .2rem;
            font-size: .14rem;
            color: $content-fontcolor;
            margin: 0;
            @include ellipsis
        }
        &__price{
            margin: 0.06rem 0 0 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $highlight-fontColor;
        }
        &__yen{
            font-size: .12rem;
        }
        &__origin{
            margin-left: .16rem;
            font-size: .12rem;
            color: $light-fontColor;
            text-decoration: line-through;
        }
        .product__number{
            position: absolute;
            right: .0rem;
            bottom: .26rem;
            &__minus{
                position: relative;
                top: .02rem;
                color: $medium-fontColor;
                margin-right: .1rem;
            }
            &__plus{
                position: relative;
                top: .02rem;
                color: $btn-bgColor;
                margin-left: .1rem;
            }
        }
    }

}
.check{
    display: flex;
    height: .51rem;
    border-top: .01rem solid $content-bgColor;
    line-height: .5rem;
    &__icon{
        position: relative;
        width: .84rem;
        &__img{
            display: block;  
            margin: .12rem auto;
            width: .28rem;
            height: .26rem;
        }
        &__tag{
            position: absolute;
            top: .04rem;
            left: .46rem;
            padding: 0 .04rem ;
            min-width: .2rem;
            height: .2rem;
            line-height: .2rem;
            text-align: center;
            background-color:$highlight-fontColor;
            border-radius: .1rem;
            font-size: .12rem;
            color: $bgColor;
            transform: scale(.5);
            transform-origin: left center;//缩小的时候，以左侧中心为原点
        }
    }
    &__info{
        flex: 1;
        color: $content-fontcolor;
        font-size: .12rem;
        &__price{
            color: $highlight-fontColor;
            font-size: .18rem;
        }
    }
    &__btn{
        width: .98rem;
        background-color: #4FB0F9;
        text-align: center;
        color: $bgColor;
        font-size: .14rem;
        a{
            text-decoration: none;
            color: #fff;
        }
    }
}   
</style>
